<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>

    <style>
    .pinkClass {
        color: pink;
        font-size: 60px;
        background-color: green;
    }

    .isRed {
        color: red;
    }

    .fontSize {
        font-size: 80px;
        font-weight: 700;
    }

    .isActive{
        background-color: pink;
    }
    .isfont {
        font-size: 100px;
    }
    </style>
</head>

<body>

    <div id="app">

        <!-- v-bind 动态绑定  class style  url   -->
        <h2  class="pinkClass">  {{msg}}</h2>

        <h2  v-bind:class="red" @click='changeClass'>  {{msg}}--1111</h2>
        <!-- 错误写法 -->
        <!-- <img src={{urlImg}} alt="">
        <img src="urlImg" alt=""> -->

        <!--   正确写法  v-bind 可以简写  :-->
        <hr>
        <!-- <img  v-bind:src="urlImg" alt=""> -->
        <!-- <img  :src="urlImg" alt=""> -->
        <hr>
        <button @click='changeImg'>点击切换图片</button>

       <!-- v-bind 可以放数组 -->
        <button   :class='[font,red]' @click='toggleChange'>点击切换类</button>
    <!-- v-bind 可以放对象 -->

    <hr>

    <!-- {key是字符串:val值是vue的变量  如果val为真则表示这个key生效  如果为假则不生效} -->
    <!-- <div v-bind:class="{ key是字符串:val值是vue的变量   }">{{msg}}</div> -->
    <div v-bind:class="{ 'isActive':isflag, 'isfont':isFalse}"  @click='isChange'>{{msg}}</div>


    <div   :class=" count%2==0 ?'isActive':''    ">  我是一个三元表达式</div>

   <!-- 对象的写法    设置多个样式 -->
    <div   :class="{isActive:count%2==0}">  我是一个三元表达式22222</div>
   

    <!--  这里采用驼峰命名法  fontSize   backgroundColor-->
    <div  v-bind:style='{color:xxx, fontSize:count+"px",backgroundColor:y}'>  {{msg}}</div>
    </div>
       <script>

           new Vue({
               el:'#app',
               data:{
                   msg:"hello vue",
                   urlImg:'./img/apple.png',
                   red:'isRed',
                   font:'fontSize',
                   isflag:true,
                   isFalse:false,
                   count:100,
                   xxx:'blue',
                   y:'red',


               },
               methods:{
                changeImg() {
                 this.urlImg='./img/lemon.png'
                },
                
                changeClass(){
                    this.red='pinkClass'

                },
                toggleChange() {
                    this.red='pinkClass'

                },
                // isChange(){
                //      this.isflag=false;
                //      this.isFalse=true
                // }
                isChange(){
                     this.isflag=!this.isflag;
                     this.isFalse=!this.isFalse
                }
               }
              
           })
       </script>
</body>
</html>